<template>
	<view>
		<!-- 排序筛选 -->
		<view class="d-flex border-top border-bottom align-center" style="height: 100rpx;">
			<view @tap="changeScreen(index)" v-for="(item,index) in screen.list" :key="index" class="flex-1 d-flex a-center j-center font-md">
				<text :class="screen.currentIndex===index?'main-text-color':'text-muted'">{{item.name}}</text>
				<view class="">
					<view :class="item.status===1?'main-text-color':'text-muted'" class="iconfont icon-paixu-shengxu line-h0" />
					<view :class="item.status===2?'main-text-color':'text-muted'" class="iconfont icon-paixu-jiangxu line-h0" />
				</view>
			</view>

			<view @tap="showDrawer('showRight')" class="flex-1 d-flex a-center j-center main-text-color">
				<text class="text-muted">筛选</text>
			</view>
		</view>
		<!-- 抽屉 -->
		<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')">
			<card headTitle="服务" :headTitleWeight="false" :headBorderBottom="false">
				<!-- 单选按钮组件 -->
				<radio-groups :selected.sync="label.selected" :label="label"></radio-groups>
			</card>
			<!-- 按钮 -->
			<view class="d-flex position-fixed bottom-0 right-0 border-top border-light" style="width: 100%;">

				<view class="flex-1 font-md py-1 text-center " hover-class="bg-light-secondary">
					重置
				</view>
				<view class="flex-1 main-bg-color text-white font-md py-2 text-center" hover-class="main-bg-hover-color">
					确定
				</view>
			</view>
		</uni-drawer>

		<!-- 列表 -->
			<block v-for="(item,index) in list" :key="index">
		<search-list :item="item" :index="index"></search-list>
		</block>
	</view>
</template>

<script>
	import uniDrawer from '@/components/uni-ui/uni-drawer/uni-drawer.vue';
	import card from '@/components/common/card.vue';
	import radioGroups from '@/components/common/radio-group.vue';
	import searchList from '@/components/search-list/search-list.vue';
	export default {
		components: {
			uniDrawer,
			card,
			radioGroups,
			searchList
		},
		data() {
			return {
				list: [
					{
					title: '真无线蓝牙耳机',
					titlepic:'/static/images/demo/demo6.jpg',
					desc:'雅致简约/分体式入耳/收纳盒充电/蓝牙5.0/触控操作',
					price:'100',
					comment_num:'1300',
					good_num:'198'
				},
				{
					title: '真无线蓝牙耳机',
					titlepic:'/static/images/demo/demo6.jpg',
					desc:'雅致简约/分体式入耳/收纳盒充电/蓝牙5.0/触控操作',
					price:'100',
					comment_num:'1300',
					good_num:'198'
				},
				{
					title: '真无线蓝牙耳机',
					titlepic:'/static/images/demo/demo6.jpg',
					desc:'雅致简约/分体式入耳/收纳盒充电/蓝牙5.0/触控操作',
					price:'100',
					comment_num:'1300',
					good_num:'198'
				},
				{
					title: '真无线蓝牙耳机',
					titlepic:'/static/images/demo/demo6.jpg',
					desc:'雅致简约/分体式入耳/收纳盒充电/蓝牙5.0/触控操作',
					price:'100',
					comment_num:'1300',
					good_num:'198'
				}
				
				
				],
				showRight: false,
				label: {
					selected: 0,
					list: [{
							name: "选项一"
						},
						{
							name: "选项二"
						},
						{
							name: "选项三"
						}
					]
				},
				screen: {
					currentIndex: 0,
					list: [{
							name: '综合',
							status: 1
						},
						{
							name: '销量',
							status: 0
						},
						{
							name: '价格',
							status: 0
						},
					]
				}
			}
		},
		methods: {
			changeRadio(index) {
				this.label.selected = index
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			changeScreen(index) {
				// 判断当前点击是否已经是激活状态
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				if (oldIndex === index) {
					return oldItem.status = oldItem.status === 1 ? 2 : 1
				}
				let newItem = this.screen.list[index]

				// 移出旧激活状态
				oldItem.status = 0
				this.screen.currentIndex = index
				// 添加新的激活状态
				return newItem.status = 1
			}
		}
	}
</script>
<style src="@/common/zcm-main-nvue.css"></style>
<style scoped>


</style>
